<template>
	<view class="ys">
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="8000" :duration="1000">
				<swiper-item>
					<view class="swiper-item" v-for="(item,index) in info.banner" :key="index">
						<image :src="item.path" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="info">
			<view class="name">
				{{info.name || ''}}
			</view>
			<view class="content">
				{{info.sketch || ''}}
			</view>
			<view class="btn" @click="makeAppoint" v-if="is_login">
				<button>立即预约</button>
			</view>
			<view class="btn" v-else>
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即预约</button>
			</view>
		</view>
		<view class="des">
			<view class="title">
				简介
			</view>
			<view class="detail" v-html="info.desc" @click="onImageTap"></view>
		</view>
	</view>
</template>

<script>
	import {
		activityDetail,
		getMpOpenid,
		mpLogin,
		userIndex
	} from "@/api/api.js"
	export default {
		data() {
			return {
				id: '',
				info: {},
				is_login: false
			}
		},
		onLoad(e) {
			this.userIndex()
			if (e.id) {
				this.id = e.id
				this.activityDetail()
			}
			this.getMpOpenid()
		},
		methods: {
			userIndex() {
				userIndex().then(res => {
					if (res.status == 1) {
						this.is_login = true
					} else {
						this.is_login = false
					}
				})
			},
			getMpOpenid() {
				var that = this
				// #ifdef MP-WEIXIN
				uni.login({
					success(res) {
						getMpOpenid({
							code: res.status == 1
						}).then(data => {
							that.open_id = data.data.openid
						})
					}
				})
				// #endif
			},
			getPhoneNumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					let encryptedData = e.detail.encryptedData
					let errMsg = e.detail.errMsg
					let iv = e.detail.iv
					let code = e.detail.code
					mpLogin({
						openid: this.open_id,
						code: code
					}).then(res => {
						if (res.status == 1) {
							let data = res.data
							uni.setStorageSync('token', data.token)
							this.is_login = true
							this.makeAppoint()
						}
					})
				}
			},
			onImageTap(e) {
				// e.target 是触发事件的 DOM 对象
				const src = e.target.dataset.src; // 获取图片的 src 属性
				// 执行图片点击后的操作，例如展示图片
				uni.previewImage({
					current: src,
					urls: [src] // 需要预览的图片 http 链接列表
				});
			},
			activityDetail() {
				activityDetail({
					id: this.id
				}).then(res => {
					if (res.status == 1) {
						this.info = res.data
					} else {
						uni.$showMsg(res.msg)

						setTimeout(() => {
							uni.navigateBack()
						}, 300)
					}
				})
			},
			makeAppoint() {
				let token = uni.getStorageSync('token')
				if (token == '') {
					uni.$showMsg('请先登录')
				} else {
					uni.navigateTo({
						url: `./time?id=${this.id}`
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		padding-bottom: 65px;
	}

	swiper {
		height: 55vw;
		max-height: 310px;

		.swiper-item {
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.info {
		margin-bottom: 20px;
		background: #fff;
		padding: 15px;

		.name {
			font-weight: bold;
		}

		.content {
			margin-top: 10px;
			font-size: 12px;
			color: #999;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		.btn {
			color: #fff;
			text-align: center;
			padding: 10px;
			height: 60px;
			border-radius: 5px;
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 50%;
			transform: translate(-50%);
			box-sizing: border-box;
			z-index: 5555;
			background: #fff;
			max-width: 500px;

			button {
				background: #8E060A;
				color: #fff;
				font-size: 14px;
				height: 40px;
				line-height: 40px;
			}
		}
	}

	.des {
		padding: 10px;
		box-sizing: border-box;
		background: #fff;
		margin: 0 auto;
		border-radius: 8px;

		.title {
			border-bottom: 1px solid #eee;
			font-weight: bold;
			padding-bottom: 10px;
			margin-bottom: 10px;
		}

		.detail {
			image {
				width: 100%;
				margin-top: 10px;
			}
		}
	}
</style>